<template>
  <div class="row h-100 align-content-start">
      <div class="col-md-2 second-nav" >
        <div class="box">
            <router-link :to="'/pro/'+id+'/index'" class="btn btn-light" v-if="power!=2">项目主页</router-link>
            <router-link :to="'/pro/'+id+'/order'" class="btn btn-light" >订单列表</router-link>
             <router-link :to="'/pro/'+id+'/daily'" class="btn btn-light" >施工日志</router-link>
            <router-link :to="'/pro/'+id+'/collect'" class="btn btn-light hidden-xs" v-if="power==0 || power==3">材料汇总</router-link>
            <div class="dropdown">
                <button type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown">
                更多
                </button>
                <div class="dropdown-menu">
  
                <router-link :to="'/pro/'+id+'/density'" class="dropdown-item " v-if="power==0">铝材线密度</router-link>
                 <router-link :to="'/pro/'+id+'/timeline'" class="dropdown-item ">项目动态</router-link> 
                <router-link :to="'/pro/'+id+'/collect'" class="dropdown-item  hidden-md" v-if="power==0 || power==3">材料汇总</router-link>
                <router-link :to="'/pro/'+id+'/set'" class="dropdown-item" v-if="power==0">设置</router-link>
                </div>
            </div>
            <div style="margin-top:100%;padding:10px;color:#fff;" class="text-center hidden-xs">
                <span class="text-muted">您在项目中的角色</span><br/><span>{{power | userJob}}</span>
            </div>
        </div>

      </div>
      <div class="col-md-10 user-page">
          <router-view></router-view>
      </div>
  </div>
</template>

<script>
import {checkPower,proInfo,proMembers} from '../../api/pro.js';
import {LOADING_START,LOADING_END} from '../../store/mutation_types.js';
export default{
  created(){
    this.id=this.$route.params.id;
    this.init();
  },
  data(){
    return{
      id:'',
      power:0
    }
  },
  methods:{
    async init(){
          this.$store.commit(LOADING_START)
          let res=await checkPower({id:this.id})
          if(res.data.res!=1){this.$store.commit(LOADING_END);alert(res.data.text);this.$router.push('/home');return};
          this.power=res.data.body;
          this.$store.commit(LOADING_END)
      }
  },
  filters:{
      userJob(value){
          switch(value){
              case 0:return '创建者';
              case 1:return '参与人';
              case 2:return '材料商';
              case 3:return '领导';
              default :return '未知';
          }
      }
  }
}

</script>

<style scoped lang="less">
@import "../../assets/css/theme.less";
@media screen and (min-width:768px){
    .box{
        height:100%;
        position:fixed;
        max-width: 180px;
        min-width:150px;
        width:15%;
        padding:20px 0;
        background-color: @cut4;  
       flex-direction: column;
        justify-content: flex-start !important;
        background-image: url();

       .btn{
           font-size: 1rem;
           min-width:100px;
           width: 60%;
           margin: 10px auto;
           margin-left: 2rem;
       }
    }
}
@media screen and (max-width:768px){
    .box{
       background-color:@cut2;
       padding:15px 0;
       flex-direction: row;
        .btn{
           font-size: 12px;
           margin: 0 5px;
       }
    }
    .second-nav{
        box-shadow: 0 5px 10px #9d9d9d;
        height:57px;
    }
}
.second-nav{
    position:relative;
    min-height:30px;
    padding:0 10px;
}
.box{
    display: flex;
    justify-content: center;
    box-shadow: none;
    padding-bottom: 10px;
    .btn{
        border-radius: 5px !important;
    }
}
a.router-link-active{
    background-color: @cut3;
    color:#fff;
}

</style>
